<template>
  <div id="home">
    <!-- 标题栏 -->
    <title-bar>
      <h2 slot="center">优购</h2>
    </title-bar>
    <!-- 搜索栏 -->
    <search-bar @searchClick="seaClick"></search-bar>
    <!-- 轮播图 -->
    <home-swiper></home-swiper>
    <home-grid></home-grid>
    <home-info></home-info>
  </div>
</template>

<script>
import TitleBar from "@/components/common/title_bar/TitleBar"
import SearchBar from '../components/common/Search_bar/SearchBar.vue'
import HomeSwiper from '../components/HomeChildrenComponents/HomeSwiper.vue'
import HomeGrid from '../components/HomeChildrenComponents/HomeGrid.vue'
import HomeInfo from '../components/HomeChildrenComponents/HomeInfo.vue'
export default {
  name:'Home',
  components:{
    TitleBar,
    SearchBar,
    HomeSwiper,
    HomeGrid,
    HomeInfo
  },
  methods: {
    seaClick(r){
      this.$emit('searClick',r)
    }
  },
}
</script>

<style scoped>
  #home{
    margin-bottom: 50px;
  }
</style>